<template>
    <div class="home">
        <el-container>
            <el-header height="100px">
                <el-row :gutter="10">
                    <el-col :span="2">
                        <div class="grid-content bg-purple">
                            主页
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content bg-purple">
                            <div class='menu-wrapper'>
                                <div class='menu-btn menu-btn-first'>功能菜单1</div>
                            </div>
                            <div class='menu-wrapper'>
                                <div class='menu-btn menu-btn-first'>功能菜单2</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div class="grid-content bg-purple"><span class="mytitle">XXXX大数据可视化研究中心</span></div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content bg-purple">
                            <div class='menu-wrapper'>
                                <div class='menu-btn menu-btn-first'>功能菜单3</div>
                            </div>
                            <div class='menu-wrapper'>
                                <div class='menu-btn menu-btn-first'>功能菜单4</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-purple">{{date}}</div>
                    </el-col>
                </el-row>

            </el-header>
            <el-main :style="mainHeight">
                <v-center></v-center>
            </el-main>
            <el-footer :style="footHeight">
                <v-footer></v-footer>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
// @ is an alias to /src
//import homeHeader from '@/components/home/header.vue'
import center from '@/components/home/center.vue'
import footer from '@/components/home/footer.vue'

export default {
    name: 'home',
    data () {
        return {
            mainHeight: {
                height: ""
            },
            footHeight: {
                height: ""
            },
            date: "时间", //new Date()
        };
    },
    components: {
        'v-center': center,
        'v-footer': footer
    },
    methods: {
        //定义方法，获取高度减去头尾
        getHeight () {
            let total_height = window.innerHeight;
            // 计算中间高度
            let main_height = (total_height - 100) * 0.7;
            // 计算底部高度
            let foot_height = (total_height - 100) * 0.3;

            this.mainHeight.height = main_height + "px";
            this.footHeight.height = foot_height + "px";
        }
    },
    created () {
        //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
        window.addEventListener("resize", this.getHeight);
        this.getHeight();
    }
}
</script>
<style>
.el-container {
    position: releative;
}
.el-header,
.el-footer {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
}
.el-header {
    top: 0px;
    line-height: 100px;
}
.el-main {
    margin-top: 100px;
    height: 60%;
    padding: 10px 20px;
}
.el-footer {
    bottom: 0px;
}
.mytitle {
    font-size: 34px;
    text-shadow: 0px 0px 8px #fff, 0px 0px 42px rgb(34, 156, 255),
        0px 0px 72px rgb(38, 217, 248), 0px 0px 150px rgb(11, 86, 248);
}

/*****************按钮*********************/
.menu-wrapper {
    position: relative;
    width: 40%;
    line-height: 60px;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
}

.menu-btn {
    text-shadow: 2px 1px 2px #000000;
    width: 89%;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.25s ease-in-out;
    /*border: solid 1px rgba(16, 201, 255, 0.3);*/
}

.menu-btn::before {
    border-top-width: 2px;
    top: -2px;
}

.menu-btn-first {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
    color: #17ccff;
}

.menu-btn-first:hover {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
    color: #f3e223;
    border: solid 1px rgba(242, 237, 34, 0.6);
}
</style>
